/* keyframes for slidein from sides */
@-webkit-keyframes slideinfromright {
  from {
    -webkit-transform: translate3d(100%, 0, 0); }
  to {
    -webkit-transform: translate3d(0, 0, 0); } }
@-moz-keyframes slideinfromright {
  from {
    -moz-transform: translateX(100%); }
  to {
    -moz-transform: translateX(0); } }
@keyframes slideinfromright {
  from {
    transform: translateX(100%); }
  to {
    transform: translateX(0); } }
@-webkit-keyframes slideinfromleft {
  from {
    -webkit-transform: translate3d(-100%, 0, 0); }
  to {
    -webkit-transform: translate3d(0, 0, 0); } }
@-moz-keyframes slideinfromleft {
  from {
    -moz-transform: translateX(-100%); }
  to {
    -moz-transform: translateX(0); } }
@keyframes slideinfromleft {
  from {
    transform: translateX(-100%); }
  to {
    transform: translateX(0); } }
/* keyframes for slideout to sides */
@-webkit-keyframes slideouttoleft {
  from {
    -webkit-transform: translate3d(0, 0, 0); }
  to {
    -webkit-transform: translate3d(-100%, 0, 0); } }
@-moz-keyframes slideouttoleft {
  from {
    -moz-transform: translateX(0); }
  to {
    -moz-transform: translateX(-100%); } }
@keyframes slideouttoleft {
  from {
    transform: translateX(0); }
  to {
    transform: translateX(-100%); } }
@-webkit-keyframes slideouttoright {
  from {
    -webkit-transform: translate3d(0, 0, 0); }
  to {
    -webkit-transform: translate3d(100%, 0, 0); } }
@-moz-keyframes slideouttoright {
  from {
    -moz-transform: translateX(0); }
  to {
    -moz-transform: translateX(100%); } }
@keyframes slideouttoright {
  from {
    transform: translateX(0); }
  to {
    transform: translateX(100%); } }
.slide.out, .slide.in {
  -webkit-animation-timing-function: ease-out;
  -webkit-animation-duration: 350ms;
  -moz-animation-timing-function: ease-out;
  -moz-animation-duration: 350ms;
  animation-timing-function: ease-out;
  animation-duration: 350ms; }

.slide.out {
  -webkit-transform: translate3d(-100%, 0, 0);
  -webkit-animation-name: slideouttoleft;
  -moz-transform: translateX(-100%);
  -moz-animation-name: slideouttoleft;
  transform: translateX(-100%);
  animation-name: slideouttoleft; }

.slide.in {
  -webkit-transform: translate3d(0, 0, 0);
  -webkit-animation-name: slideinfromright;
  -moz-transform: translateX(0);
  -moz-animation-name: slideinfromright;
  transform: translateX(0);
  animation-name: slideinfromright; }

.slide.out.reverse {
  -webkit-transform: translate3d(100%, 0, 0);
  -webkit-animation-name: slideouttoright;
  -moz-transform: translateX(100%);
  -moz-animation-name: slideouttoright;
  transform: translateX(100%);
  animation-name: slideouttoright; }

.slide.in.reverse {
  -webkit-transform: translate3d(0, 0, 0);
  -webkit-animation-name: slideinfromleft;
  -moz-transform: translateX(0);
  -moz-animation-name: slideinfromleft;
  transform: translateX(0);
  animation-name: slideinfromleft; }
